<template>
	<view class="container">
		<!-- <block v-if="express_com=='同城配送'">
			<map v-if="psorder.status!=0 && psorder.status!=4" class="map" :longitude="binfo.longitude"
				:latitude="binfo.latitude" scale="14" :markers="[{
			id:0,
			latitude:binfo.latitude,
			longitude:binfo.longitude,
			iconPath: 'https://wx.2024csnl.com/static/peisong/marker_business.png',
			width:'44',
			height:'54'
		},{
			id:0,
			latitude:orderinfo.latitude,
			longitude:orderinfo.longitude,
			iconPath: 'https://wx.2024csnl.com/static/peisong/marker_kehu.png',
			width:'44',
			height:'54'
		},{
			id:0,
			latitude:psuser.latitude,
			longitude:psuser.longitude,
			iconPath: 'https://wx.2024csnl.com/static/peisong/marker_qishou.png',
			width:'44',
			height:'54'
		}]"></map>
			<map v-else class="map" :longitude="binfo.longitude" :latitude="binfo.latitude" scale="14" :markers="[{
			id:0,
			latitude:binfo.latitude,
			longitude:binfo.longitude,
			iconPath: 'https://wx.2024csnl.com/static/peisong/marker_business.png',
			width:'44',
			height:'54'
		},{
			id:0,
			latitude:orderinfo.latitude,
			longitude:orderinfo.longitude,
			iconPath: 'https://wx.2024csnl.com/static/peisong/marker_kehu.png',
			width:'44',
			height:'54'
		}]"></map>
		</block> -->
		<block >
			<view class="expressinfo">
				<view class="head">
					<view class="f1">
						<image :src="pre_url + 'https://wx.2024csnl.com/static/img/feiji.png'"></image>
					</view>
					<view class="f2">
						<view class="t1">快递公司：<text style="color:#333">{{express_com}}</text></view>
						<view class="t2">快递单号：<text style="color:#333">{{express_no}}</text></view>
					</view>
				</view>
				<view class="content">
					<view v-for="(item, index) in datalist" :key="index" :class="'item ' + (index==0?'on':'')">
						<view class="f1">
							<image :src="'https://wx.2024csnl.com/static/goods/dot' + (index==0?'2':'1') + '.png'"></image>
						</view>
						<view class="f2">
							<text class="t2">{{item.time}}</text>
							<text class="t1">{{item.context}}</text>
						</view>
					</view>
					<view v-if="nodata"  style="color: #999;text-align: center;">暂未查找到物流信息</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		getPeopleLogistics
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				pre_url: getApp().globalData.BASE_URL,
				nodata: false,
				express_com: '',
				express_no: '',
				type: '',
				datalist: [],

				orderinfo: {},
				prolist: [],
				binfo: {},
				psuser: {},
				psorder: {}
			};
		},

		onLoad(opt) {
			console.log(opt, 'opt----')
			this.express_com = opt.com
			this.express_no = opt.no
			this.type = opt.type
			this.getdata();
			console.log(this.express_com, "dd")
		},
		onPullDownRefresh() {
			this.getdata();
		},
		methods: {
			async getdata() {
				const res = await getPeopleLogistics('s=/ApiOrder/logistics', {
					express_com: this.express_com,
					express_no: this.express_no,
					type: this.type
				})
				const {
					statusCode,
					data
				} = res
				console.log(res, "res-----", res.statusCode)
				if (statusCode == 200) {
					if (this.express_com == '同城配送') {
						this.orderinfo = res.orderinfo;
						this.prolist = res.prolist;
						this.binfo = res.binfo;
						this.psorder = res.psorder;
						this.psuser = res.psuser;
						setTimeout(() => {
							this.getdata();
						}, 10000)
					} else {
						let datalist = data.datalist;
						if (datalist.length < 1) {
							this.nodata = true;
						}
						this.datalist = datalist;
						console.log(this.datalist)
					}
				}
			},
			// call: function(e) {
			// 	var tel = e.currentTarget.dataset.tel;
			// 	uni.makePhoneCall({
			// 		phoneNumber: tel
			// 	});
			// }
		}
	}
</script>
<style>
	.expressinfo .head {
		width: 100%;
		background: #fff;
		margin: 20rpx 0;
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center
	}

	.expressinfo .head .f1 {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx
	}

	.expressinfo .head .f1 image {
		width: 100%;
		height: 100%
	}

	.expressinfo .head .f2 {
		display: flex;
		flex-direction: column;
		flex: auto;
		font-size: 30rpx;
		color: #999999
	}

	.expressinfo .head .f2 .t1 {
		margin-bottom: 8rpx
	}

	.expressinfo .content {
		width: 90%;
		background: #fff;
		display: flex;
		flex-direction: column;
		color: #979797;
		padding: 20rpx 40rpx
	}

	.expressinfo .content .on {
		color: #23aa5e;
	}

	.expressinfo .content .item {
		display: flex;
		width: 96%;
		margin: 0 2%;
		border-left: 1px #dadada solid;
		padding: 10rpx 0
	}

	.expressinfo .content .item .f1 {
		width: 40rpx;
		flex-shrink: 0;
		position: relative
	}

	.expressinfo .content image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: -16rpx;
		top: 22rpx;
	}

	/*.content .on image{ top:-1rpx}*/
	.expressinfo .content .item .f1 image {
		width: 30rpx;
		height: 30rpx;
	}

	.expressinfo .content .item .f2 {
		display: flex;
		flex-direction: column;
		flex: auto;
	}

	.expressinfo .content .item .f2 .t1 {
		font-size: 30rpx;
	}

	.expressinfo .content .item .f2 .t1 {
		font-size: 26rpx;
	}


	.map {
		width: 100%;
		height: 500rpx;
		overflow: hidden
	}

	.ordertop {
		width: 100%;
		height: 220rpx;
		padding: 50rpx 0 0 70rpx
	}

	.ordertop .f1 {
		color: #fff
	}

	.ordertop .f1 .t1 {
		font-size: 32rpx;
		height: 60rpx;
		line-height: 60rpx
	}

	.ordertop .f1 .t2 {
		font-size: 24rpx
	}

	.order-box {
		width: 94%;
		margin: 20rpx 3%;
		padding: 6rpx 3%;
		background: #fff;
		border-radius: 8px
	}

	.order-box .head {
		display: flex;
		width: 100%;
		border-bottom: 1px #f5f5f5 solid;
		height: 88rpx;
		line-height: 88rpx;
		overflow: hidden;
		color: #999;
	}

	.order-box .head .f1 {
		display: flex;
		align-items: center;
		color: #222222
	}

	.order-box .head .f1 .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4px
	}

	.order-box .head .f1 .t1 {
		color: #06A051;
		margin-right: 10rpx
	}

	.order-box .head .f2 {
		color: #FF6F30
	}

	.order-box .head .f2 .t1 {
		font-size: 36rpx;
		margin-right: 4rpx
	}

	.order-box .content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 16rpx 0px;
		border-bottom: 1px solid #f5f5f5;
		position: relative
	}

	.order-box .content .f1 {
		width: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t1 {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t1 .x1 {
		color: #FF6F30;
		font-size: 28rpx;
		font-weight: bold
	}

	.order-box .content .f1 .t1 .x2 {
		color: #999999;
		font-size: 24rpx;
		margin-bottom: 8rpx
	}

	.order-box .content .f1 .t2 .img {
		width: 12rpx;
		height: 36rpx
	}

	.order-box .content .f1 .t3 {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t3 .x1 {
		color: #FF6F30;
		font-size: 28rpx;
		font-weight: bold
	}

	.order-box .content .f1 .t3 .x2 {
		color: #999999;
		font-size: 24rpx
	}

	.order-box .content .f2 {}

	.order-box .content .f2 .t1 {
		font-size: 36rpx;
		color: #222222;
		font-weight: bold;
		line-height: 50rpx;
		margin-bottom: 6rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f2 .t2 {
		font-size: 24rpx;
		color: #222222;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f2 .t3 {
		font-size: 36rpx;
		color: #222222;
		font-weight: bold;
		line-height: 50rpx;
		margin-top: 30rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f3 .img {
		width: 72rpx;
		height: 168rpx
	}

	.orderinfo {
		width: 94%;
		margin: 20rpx 3%;
		margin-top: 10rpx;
		padding: 14rpx 3%;
		background: #FFF;
		border-radius: 8px
	}

	.orderinfo .box-title {
		color: #161616;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold
	}

	.orderinfo .item {
		display: flex;
		width: 100%;
		padding: 10rpx 0;
	}

	.orderinfo .item .t1 {
		width: 200rpx;
		color: #161616
	}

	.orderinfo .item .t2 {
		flex: 1;
		text-align: right;
		color: #222222
	}

	.orderinfo .item .red {
		color: red
	}

	.bottom {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.bottom .f1 {
		width: 188rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		color: #373C55;
		border-right: 1px solid #EAEEED
	}

	.bottom .f1 .img {
		width: 44rpx;
		height: 44rpx
	}

	.bottom .f2 {
		width: 188rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 20rpx;
		color: #373C55
	}

	.bottom .f2 .img {
		width: 44rpx;
		height: 44rpx
	}

	.bottom .btn1 {
		flex: 1;
		background: linear-gradient(-90deg, #06A051 0%, #03B269 100%);
		height: 100rpx;
		line-height: 100rpx;
		color: #fff;
		text-align: center;
		font-size: 32rpx
	}
</style>
